<template>
    <div>
        <!-- 头部banner -->
       <div class="head">
           <image :src="src1" class="create_img"></image> 
       </div>
       <div class="head_bottom"></div>
       <div class="head_top">
           <text class="title">{{title}}</text>
       </div>
       <!-- 进度条 -->
       <div class="shop_course">
           <div class="shop_change" :class="shop_change1"></div>
       </div>
       <div class="shop_course1">
           <div class="shop_course2">
               <text class="shop_1" :class="shop_1_1">1</text>
               <text class="shop_2" :class="shop_1_2">2</text>
               <text class="shop_3" :class="shop_1_3">3</text>
           </div>
       </div>
       <!-- 代表进度条的字 -->
       <div class="text1">
           <text class="text_1" :class="text_1_1">设置店铺名称</text>
           <text class="text_2" :class="text_1_2">设置店铺地址</text>
           <text class="text_3" :class="text_1_3">选择业务范围</text>
       </div>
       <div class="shop_title_text" v-if="show0">
           <input type="text" class="shop_title_inp" placeholder="在这里填写您的小铺名称" 
           v-model="shop_title" v-on="shop_title_shuru()" />
       </div>
       <!-- 确定按钮 -->
       <text class="confirm" v-show="show0" @click="next()"
            :class="confim1">填好啦，下一步</text>
       <!-- 设置店铺地址模块 -->
       <!-- 我若成佛，天下无魔 -->
       <!-- 我若成魔，佛奈我何 -->
       <div class="shop_adress_text" v-if="show1">
           <image :src="src2" class="shop_adress_image"></image>
           <input type="text" placeholder="请点击获取位置" class="shop_adress_text1" 
                v-on="light()" v-model="lights"/>
           <text class="shop_adress_text2" @click="get_map()">获取位置</text>
       </div>
       <text class="shop_text_adress" v-if="show1">获取位置不准确时，可以手动更改地址哦</text>
       <div class="button" v-show="show1">
           <text class="shop_button" @click="prev1()">上一步</text>
           <text class="shop_button1" @click="next1()" :class="adress_light">填好啦，下一步</text>
       </div>
       <!-- 业务啊，业务 -->
       <!-- 业务模块 -->
       <div class="shop_operation" v-show="show2">
           <text class="text_shop1" classid="" v-for="( index,item ) in list1" :btnid='index.id' @click="chooseServe($event,index.id)" :key="item.index"
            >{{index.scname}}
           </text>
       </div>
       <div class="button_202" v-show="show2">
           <text class="button_2" @click="prev2()">上一步</text>
           <text class="button_20" @click="finish()">创建成功</text>
       </div>
       <!-- 店铺名重复的弹窗 -->
        <div class="wrap" v-show="show012">
            <div class="wqqq" v-show="show012"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">嗨呀！店铺名称重复啦，您可以试试：</text>
                <text class="www123">xx店铺xx区</text>
                <div class="wrap-4">
                  <text class="zhaohui11" @click="sure()">确定</text>
                </div>
              </div>
            </div>
         </div> 
       <!-- 佛祖保佑，永无bug！！！ -->
    </div>
</template>
<script>
    import "../../../js/js-function.js"
    import "../../../js/jquery-1.8.3.js"
    let stream = weex.requireModule('stream');
    export default {
        data () {
            return {
               src1: 'http://192.168.2.123:8080/img/create_banner.png',
               title: 'HI~~亲爱的店主,我们终于等到您啦,让我们一起创建属于您的店铺吧！',
               show0: true,
               title1: '告诉你一个小秘密，精确的定位能够方便用户的消费体验哦！',
               title2: '亲爱的店长，你知道吗？详细的服务类型是营销成功的要素之一！',
               src2: 'http://192.168.2.123:8080/img/shop_adress.png',
               src3: 'http://192.168.2.123:8080/img/work_banner.png',
               src4: 'http://192.168.2.123:8080/img/adress_banner.png',
               show1: false,
               show2: false,
               shop_title: '',
               confim1: '',
               statue: '',
               inp_text: '',
               adress_light: '',
               lights: '',
               src9: 'http://192.168.2.123:8080/img/create_banner.png',
               title9: 'HI~~亲爱的店主,我们终于等到您啦,让我们一起创建属于您的店铺吧！',
               text_1_1: '',
               text_1_2: '',
               text_1_3: '',
               shop_1_2: '',
               shop_1_1: '',
               shop_1_3: '',
               shop_change1: '',
               shop_change2: '',
               show012: false,    //店铺名重复的弹窗
               text_shopshop: '', //点击选中数据
               list1:[
                   
               ],
                checkId:[],
                choose:false,
        }
        },

        beforeCreate:function(){
              // 虚拟dom创建前获取经营类别数据
                // console.log("发送/获取数据")
                stream.fetch({
                  method: "POST",  
                  url: "http://1.194.233.171:8081/api/shops/findAllShopsClass ",  
                  type: "json",
                  body: '',  
                  headers:{
                        'Content-Type':'application/json'
                  },
                  mode:"cors",
                }, (ret) => {
                  // console.log(ret.data.data)
                  this.list1=ret.data.data
                }, function (response) {
                    // console.log(response);
                });

        },
        updated:function(){
  /*        var checkId=[];
        // 店铺业务分类点击选中/取消选中事件
          $(function(){
            $(".shop_operation").children().toggle(function(){
              $(this).attr({"class":"text_shop1 cchange","checked":true})
              checkId.push($(this).attr("btnId"))
                $(".button_20").css("background","green")
            },function(){
              $(this).attr({"class":"text_shop1","checked":false});
                $(".button_20").css("background","#999")
                var res = checkId.forEach( ( v, k ) => {
                    if(v==$(this).attr("btnId")){
                      checkId.splice(k,1);
                    }
                })
              }
            )
          });*/

           // 获取创建完成点击按钮
           //  var finishBtn=document.getElementsByClassName("button_20")[0];
            // 点击事件
            // finishBtn.onclick=function(){
            //     // 判断是否选中添加入数组
            //     var nIdArr =[];
            //    var asd =document.getElementsByClassName("shop_operation")[0];
            //    var allServeId = asd.children;
            //    for(var i in allServeId){
            //        if(allServeId[i].className==="weex-text weex-el text_shop1 cchange"){
            //            nIdArr.push(allServeId[i].attributes.btnId.value);
            //        }
            //    }
            //    console.log(nIdArr);
            //     var nArr=[];
            //    nIdArr.forEach(function(v,k){
            //       var a = {
            //         "id":v
            //       };
            //         nArr.push(a);
            //     });
            //     // 创建完成读取local Storage 发送fetch请求获取数据
            //      var name1 = JSON.parse(localStorage.getItem('name'));
            //    var path1 = JSON.parse(localStorage.getItem('path'));
            //    var useridd = JSON.parse(localStorage.getItem('userid'));
            //
            //     var ssname=JSON.stringify(name1.name);
            //     var sspath=JSON.stringify(path1.path);
            //     var userids=JSON.stringify(useridd.idCode);
            //     var sArr=JSON.stringify(nArr);
            //    //  console.log(nArr);
            //    // console.log(ssname);
            //    // console.log(sspath);
            //    // console.log(sArr);
            //     /*fetch请求发送*/
            //    // ${sArr}
            //     setTimeout(function(){
            //         stream.fetch({
            //             method: "POST",
            //             url: "http://192.168.2.140:8081/api/shops/saveShops",
            //             type: "json",
            //             headers:{
            //                 'Content-Type':'application/json'
            //             },
            //             body: `{
            //           "sname":${ssname},
            //           "saddress":${sspath},
            //            "shopsClassDTOS":${sArr},
            //            "shopAccountid":${userids}
            //       }`,
            //             // mode:"cors",
            //         },function (ret) {
            //             if(ret.data.status===1){
            //                 // 如果创建成功返回1，
            //                 //  清空本地缓存
            //                 localStorage.removeItem('userid');
            //                 localStorage.removeItem('name');
            //                 localStorage.removeItem('path');
            //
            //                 const info1 = {
            //                     ssid: ret.data.data.sid,
            //                 };
            //                 localStorage.setItem('usersid', JSON.stringify(info1));
            //
            //                 console.log(ret);
            //                 // 路由跳转店铺页
            //                 location.href="#/home";
            //             }
            //         }, function (response) {
            //             // console.log(response);
            //         });
            //
            //     },100);
            //
            //    }

        },
        methods: {
            finish(){

                var nIdArr =[];
                var asd =document.getElementsByClassName("shop_operation")[0];
                var allServeId = asd.children;
                for(var i in allServeId){
                    if(allServeId[i].className==="weex-text weex-el text_shop1 cchange"){
                        nIdArr.push(allServeId[i].attributes.btnId.value);
                    }
                }
                // console.log(nIdArr);
                var nArr=[];
                nIdArr.forEach(function(v,k){
                    var a = {
                        "id":v
                    };
                    nArr.push(a);
                });
                // 创建完成读取local Storage 发送fetch请求获取数据
                var name1 = JSON.parse(localStorage.getItem('name'));
                var path1 = JSON.parse(localStorage.getItem('path'));
                var useridd = JSON.parse(localStorage.getItem('userid'));

                var ssname=JSON.stringify(name1.name);
                var sspath=JSON.stringify(path1.path);
                var userids=JSON.stringify(useridd.idCode);
                var sArr=JSON.stringify(nArr);
                console.log(ssname);
                console.log(sspath);
                console.log(userids);
                console.log(sArr);
                /*fetch请求发送*/
                // ${sArr}
                setTimeout(function(){
                    stream.fetch({
                        method: "POST",
                        url: "http://192.168.2.140:8081/api/shops/saveShops",
                        type: "json",
                        headers:{
                            'Content-Type':'application/json'
                        },
                        body: `{
                      "sname":${ssname},
                      "saddress":${sspath},
                       "shopsClassDTOS":${sArr},
                       "shopAccountid":${userids}
                  }`,
                        // mode:"cors",
                    },function (ret) {
                        console.log(ret);
                        if(ret.data.status===1){
                            // 如果创建成功返回1，
                            //  清空本地缓存
                            // localStorage.removeItem('userid');(后期需要 暂不清理)
                            localStorage.removeItem('name');
                            localStorage.removeItem('path');

                            // 存店铺ID
                            const info1 = {
                                ssid: ret.data.data.sid,
                            };
                            localStorage.setItem('shopIds', JSON.stringify(info1));

                            console.log(ret);
                            // 路由跳转店铺页
                            location.href="#/home";
                        }
                    }, function (response) {
                        console.log(response);
                    });

                },100);



            },
            chooseServe(e,index){
                var checkId=[];
                if(e.target.className==="weex-text weex-el text_shop1 cchange"){
                    e.target.className="weex-text weex-el text_shop1 cchange2";
                    // this.choose=false;
                    this.checkId.forEach( ( v, k ) => {
                                  if(v===e.target){
                                    this.checkId.splice(k,1);
                                  }
                              })
                }else if(e.target.className="weex-text weex-el text_shop1 cchange2"){
                    e.target.className="weex-text weex-el text_shop1 cchange";
                    // console.log(e.target.className);
                    // console.log(this.checkId);
                    this.checkId.push(index);
                }else{
                    e.target.className="weex-text weex-el text_shop1 cchange";
                }
                // console.log(index);
                // console.log(e.target.className);
                // console.log(checkId)
            },
            // 第一页~~监听输入框的变化，非空亮点击事件
          shop_title_shuru(){
            let confim1 = '';
            if(this.shop_title !== ''){
                this.confim1 = 'confim1';
                this.statue = 1;  //记录状态值；判断是否可触发点击事件
            }else if(this.shop_title == ''){
                this.confim1 = 'confirm';
                this.statue = 2;  //记录状态值；判断是否可触发点击事件
                this.inp_text = this.shop_title;
            }
          },
          // 监听第二页输入框变化，非空亮点击事件
         light(){
            let adress_light ='';
            if( this.lights !==''){  //判断输入框是否为空
                this.statue = 3;
                this.adress_light = 'adress_light'; //不为空，按钮变亮
            }else if(this.lights ==''){    //为空
                this.statue = 4;
                this.adress_light = 'shop_button1';  //按钮变暗
            }
         },
          // 第一页~~~点击下一步
          next(){
            // console.log(this.statue)
            // 获取当前input值传入local Storage
              var inpValue1=$(".shop_title_inp")[0].value;
              // console.log(inpValue1)
               const info1 = {
                  name: inpValue1,
                };
              localStorage.setItem('name', JSON.stringify(info1));
            if(this.statue == 2){
                // console.log('我现在是空');
            }else if(this.statue ==1){
                this.show0 = false;
                this.show1 = true;
                this.src1 = this.src4;
                this.title = this.title1;
                this.text_1_2 = 'text_1_2';
                this.shop_1_2 = 'shop_1_2';
                this.shop_change1 = 'shop_change1';
            }
          },
          // 第2页，点击下一步
          next1(){
            // 获取当前input值传入local Storage
              var inpValue2=$(".shop_adress_text1")[0].value;
              const info2 = {
                  path: inpValue2,
                };
               localStorage.setItem('path', JSON.stringify(info2));
            if(this.statue == 3){
                this.show1 = false;
                this.show2 = true;
                this.src1 = this.src3;
                this.title = this.title2;
                this.text_1_3 = 'text_1_3';
                this.shop_1_3 = 'shop_1_3';
                this.shop_change1 = 'shop_change2';
                
            }else if( this.statue == 4){
                console.log('我不跳');
            }         
          },
          // 第三页，点击上一步
          prev2(){
            this.show2 = false;
            this.show1 = true;
            this.src1 = this.src4;
            this.title = this.title1;
            this.text_1_3 = 'text_3';
            this.shop_1_3 = 'shop_3';
            this.shop_change1 = 'shop_change1';
          },
          // 第二页，点击上一步
          prev1(){
            this.show1 = false;
            this.show0 = true; 
            this.src1 = this.src9;
            this.title = this.title9;
            this.text_1_2 = 'text_2';
            this.shop_1_2 = 'shop_2';
            this.shop_change1 = 'shop_change';
          },
          // 点击获取位置
          get_map(){
            this.$router.push('/shop_map');
          },
          // 点击创建完成
          create_finish(){
            // var name = JSON.parse(localStorage.getItem('name'));
            // var path = JSON.parse(localStorage.getItem('path'));
            // console.log(name,path);
            // var obj={};
            // obj='{"shopsClassDTOS":[],"sname":name.name,"saddress":path.path}'
            // console.log(obj);

            // $(".shop_operation").children().each((k,v)=>{
            //     console.log($(this).attr("classid"))
            // })
            // this.$router.push('/shop');

            /*fetch请求发送*/

            // stream.fetch({
            //   method: "POST",  
            //   url: "http://1.194.233.171:8081/api/shops/saveShops",  
            //   type: "json",
            //   body: obj,  
            //   headers:{
            //         'Content-Type':'application/json'
            //   },
            //   mode:"cors",
            // },function (ret) {
            //   console.log(ret)
            // }, function (response) {
            //     console.log(response);
            // });


          },
         // 店铺名重复的弹窗，点击确定
          sure(){
            this.show012 = false; 
          },
        }
    }
</script>
<style scoped>
    .cchange2{
        background-color: #fff;
    }
    .cchange{
        background-color: yellow;
    }
    .wrap{
        width: 100%;
        height: 100%;
        position: fixed;
        /*background-color: #000;*/
        z-index: 9999;
        justify-content: center;
        align-items: center;
        opacity: 1;
    }
    .www123{
        color: #33c179;
    }
    .wqqq{
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #000;
        z-index: 299;
        opacity: .9;
        justify-content: center;
        align-items: center;
    }
    .wrap-1{
        width: 237px;
        height: 168px;
        border-radius: 10px;
        /*background-image: url(http://192.168.2.123:8080/img/dialog_one.png);*/
        background-size: 237px 168px;
        opacity: 1;
        box-sizing: border-box;
        padding-top: 28px;
        z-index: 300;
        background-color: #fff;
    }
    .wrap-2{
        width: 200px;
        height: 100px;
        justify-content: center;
        align-items: center;
        margin-left: 23px;
        opacity: 1;
        /*flex-direction: row;*/
    }
    .wrap-3{
        justify-content: center;
        align-items: center;
        font-size: 14px;
        opacity: 1;
        flex-direction: row;
    }
    .wrap-4{
        flex-direction: row;
        width: 220px;
        height: 31px;
        margin-top: 24px;
        justify-content: space-around;
        /*background-color: pink;*/
        align-items: center;
        opacity: 1;
    }
    .zhaohui11,.duanxin11{
        width: 83px;
        height: 31px;
        border-radius: 25px;
        background-color: #33c179;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 31px;
        opacity: 1;
    }
    .shop_adress_text{
        width: 296px;
        margin: auto;
        margin-top: 73px;
        flex-direction: row;
        height: 24px;
        border-bottom: solid 1px #d2d2d2;
        outline: none;
        padding-left: 5px;
    }
    .button_202{
        width: 100%;
        height: 37px;
        /*background-color: pink;*/
        box-sizing: border-box;
        flex-direction: row;
    }
    .button_2{
        width: 110px;
        height: 37px;
        background-color: #33c179;
        margin-left: 40px;
        text-align: center;
        line-height: 37px;
        color: #fff;
        font-size: 16px;
        border-radius: 20px;
    }
    .button_20{
        width: 130px;
        height: 37px;
        background-color: #999;
        margin-left: 37px;
        text-align: center;
        line-height: 37px;
        color: #fff;
        font-size: 16px;
        border-radius: 20px;
    }
    .text_shop1{
        height: 33px;
        line-height: 33px;
        border: solid 2px #a0a0a0;
        border-radius: 20px;
        margin-top: 36px;
        margin-left: 18px;
        padding-right: 15px;
        padding-left: 15px;
        /*background-color: #ccc;*/
    }
    .text_shopshop{
        height: 33px;
        line-height: 33px;
        border: solid 2px #a0a0a0;
        border-radius: 20px;
        margin-top: 36px;
        margin-left: 18px;
        padding-right: 15px;
        padding-left: 15px;
        background-color: #33c179;
    }
    .shop_operation{
        width: 100%;
        height: 293px;
        /*background-color: pink;*/
        justify-content: space-around;
        padding-top: 32px;
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 12px;
        padding-right: 12px;
        overflow-y: auto;
    }
    .shop_button{
        width: 110px;
        height: 37px;
        background-color: #33c179;
        margin-left: 40px;
        text-align: center;
        line-height: 37px;
        color: #fff;
        font-size: 16px;
        border-radius: 20px;
    }
    .shop_button1{
        width: 160px;
        height: 37px;
        background-color: #999;
        margin-left: 37px;
        text-align: center;
        line-height: 37px;
        color: #fff;
        font-size: 16px;
        border-radius: 20px;
    }
    .adress_light{
        width: 160px;
        height: 37px;
        background-color: #33c179;
        margin-left: 37px;
        text-align: center;
        line-height: 37px;
        color: #fff;
        font-size: 16px;
        border-radius: 20px;
    }
    .button{
        width: 100%;
        height: 37px;
        /*background-color: pink;*/
        margin-top: 52px;
        flex-direction: row;
    }
    .shop_text_adress{
        width: 296px;
        height: 13px;
        line-height: 13px;
        color: #4dd28f;
        margin: auto;
        margin-top: 11px;
        font-size: 13px;
    }
    .shop_adress_text2{
        margin-left: 23px;
        color: #33c179;
        font-size: 15px;
    }
    .shop_adress_image{
        width: 15px;
        height: 20px;
    }
    .shop_adress_text1{
        height: 20px;
        width: 200px;
        padding-left: 5px;
        box-sizing: border-box;
    }
    .head{
        width: 100%;
        height: 192px;
        background-color: pink;
        box-sizing: border-box;
        z-index: 1;
    }
    .head_bottom{
        width: 100%;
        height: 192px;
        background-color: #000;
        opacity: .4;
        z-index: 1;
        position: fixed;
        top: 0;
    }
    .head_top{
        width: 100%;
        height: 192px;
        opacity: 1;
        z-index: 1;
        position: fixed;
        top: 0;
    }
    .create_img{
        width: 100%;
        height: 100%;
        z-index: -200;
    }
    .title{
        padding-left: 22px;
        padding-right: 23px;
        box-sizing: border-box;
        font-size: 15px;
        text-align: center;
        position: fixed;
        top: 69px;
        z-index: 88;
        font-weight: bold;
        color: #fff;
    }
    .shop_course{
        width: 296px;
        height: 14px;
        background-color: #ccc;
        border-radius: 10px;
        margin: auto;
        margin-top: 45px;
        z-index: 1;
    }
    .shop_course1{
        width: 100%;
        height: 23px;
        /*background-color: pink;*/
        position: fixed;
        top: 232px;
        justify-content: center;
        align-items: center;
        z-index: 999;
    }
    .shop_course2{
        width: 296px;
        height: 23px;
        /*background-color: red;*/
        z-index: 999;
        flex-direction: row;
    }
    .shop_1,.shop_2,.shop_3{
        width: 23px;
        height: 23px;
        background-color: #33c179;
        border-radius: 50%;
        z-index: 999;
        text-align: center;
        justify-content: center;
        line-height: 23px;
        color: #fff;
    }
    .shop_1{
        position: fixed;
        left: 76px;
    }
    .shop_2{
        position: fixed;
        left: 176px;
        background-color: #ccc;
    }
    .shop_1_2{
        position: fixed;
        left: 176px;
        background-color: #33c179;
    }
    .shop_3{
        position: fixed;
        left: 278px;
        background-color: #ccc;
    }
    .shop_1_3{
        position: fixed;
        left: 278px;
        background-color: #33c179;
    }
    .shop_change{
        width: 98px;
        height: 100%;
        background-color: #33c179;
        border-radius: 10px;
    }
    .shop_change1{
        width: 202px;
        height: 100%;
        background-color: #33c179;
        border-radius: 10px;
    }
    .shop_change2{
        width: 296px;
        height: 100%;
        background-color: #33c179;
        border-radius: 10px;
    }
    .text1{
        width: 296px;
        height: 14px;
        margin: auto;
        margin-top: 14px;
        /*background-color: pink;*/
        flex-direction: row;
        justify-content: space-around;
    }
    .text_1,.text_2,.text_3{
        font-size: 14px;
        color: #999;
        line-height: 14px;
    }
    .text_1{
        color: #33c179;
    }
    .text_1_1{
        font-size: 14px;
        color: #33c179;
        line-height: 14px;
    }
    .text_1_2{
        font-size: 14px;
        color: #33c179;
        line-height: 14px;
    }
    .text_1_3{
        font-size: 14px;
        color: #33c179;
        line-height: 14px;
    }
    .shop_title_text{
        width: 300px;
        height: 42px;
        /*background-color: pink;*/
        border-bottom: solid 1px #d2d2d2;
        margin: auto;
        margin-top: 92px;
        flex-direction: row;
    }
    .shop_title_inp{
        width: 100%;
        text-align: center;
        outline: none;
        border: none;
    }
    .confirm{
        width: 160px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        background-color: #999;
        border-radius: 20px;
        margin: auto;
        margin-top: 73px;
    }
    .confim1{
        width: 160px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        background-color: #33c179;
        border-radius: 20px;
        margin: auto;
        margin-top: 73px;
    }
</style>